<!-- 使用类型以及折扣类型设置弹出窗 -->
<template>
	<div>
		<el-dialog :title="state.title" v-model="state.isShowDialog" center class="borderRadius10" width="690">
			<section class="ml30">
				<el-form ref="ruleFormRef"  label-position="top" label-width="180px" status-icon>
					<el-form-item label="可重复选择的条件：" >
						<section class="flex" style="flex-direction: column;">
                            <el-checkbox-group v-model="state.selectList">
                                <el-checkbox :label=0>
                                    直接服务条件<span class="font15">（在一定时间内，代理直接服务的指定类型的代理不少于固定人数）</span>
                                </el-checkbox>
                                <el-checkbox :label=1>
                                    团队服务条件<span class="font15">（在一定时间内，团队服务的指定类型的代理不少于固定人数）</span>
                                </el-checkbox>
                                <el-checkbox :label=6>
                                    累计进货<span class="font15">（在一定时间内，代理进货不少于固定金额）</span>
                                </el-checkbox>
                                <el-checkbox :label=3>
                                    累计充值<span class="font15">（在一定时间内，代理充值不少于固定金额）</span>
                                </el-checkbox>
                                <el-checkbox :label=7>
                                    商品累计购买<span class="font15">（在一定时间内，累计购买指定商品的达到一定数量）</span>
                                </el-checkbox>
                            </el-checkbox-group>
						</section>
					</el-form-item>
                    <el-form-item label="不可重复选择的条件：">
						<section class="flex" style="flex-direction: column;">
                            <el-radio-group v-model="state.selectId">
                                <el-radio :label=4>
                                    一次性充值<span class="font15">（需要进行一次性充值不少于指定金额）</span>
                                </el-radio>
                                <el-radio :label=5>
                                    一次性补货<span class="font15">（需要进行一次性消费不少于指定金额）</span>
                                </el-radio>
                            </el-radio-group>
						</section>
					</el-form-item>
				</el-form>
			</section>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, nextTick } from 'vue';
const emit = defineEmits(['selectFun'])
const state = reactive({
	loading: false,
	isShowDialog: false,
	type: '',
	title: '',
    // 可重复选择项
	selectList: [],
    // 不可重复选择项
    selectId:null, 
	index:null,
	indexX:null,

});

// 打开弹窗
const openDialog = (index:any,indexX:any,selectId:any) => {
	nextTick(() => {
		state.index = index;
		state.indexX = indexX;
		state.title = "选择条件";
		state.isShowDialog = true;
		state.selectList = [];
		state.selectId = selectId;
	});
};


// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onSubmit = () => {
	emit('selectFun',state.index,state.indexX, state.selectId, state.selectList);
	closeDialog();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss"></style>
